<template>
    <div 
    class="document-list-item"
    :class="{shadow: shadow, radius: radius, disabled: disabled}"
    >
        <a 
        class="img img-con"
        :class="{index: index}"
        :href="aHref"
        target="_blank"
        >
            <el-image :src="disabled ? '' : data.previewUrl" fit="cover" class="cover-img"></el-image>

            <a 
            v-if="similar"
            class="similar"
            :href="similarHref"
            >
                找相似
            </a>
        </a>

        <div class="info">
            <a 
            class="title" 
            :href="aHref"
            target="_blank"
            >
                {{disabled ? '该文件模板不存在' : docname}}
            </a>
        </div>

        <div class="tool-bar">
            <item-tool-bar
                :layout="layout"
                :data="data"
                :isImg="true"
                type="document"
                :share="aHref"
                :rowguid="data.guid"
                @like="$emit('like')"
                @collect="$emit('collect')"
            ></item-tool-bar>
        </div>
    </div>
</template>

<script>
import itemToolBar from '@components/sys/item-tool-bar/index';

export default {
    components: {
        itemToolBar,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        shadow: {
            type: Boolean,
            default: false,
        },
        radius: {
            type: Boolean,
            default: false,
        },
        similar: {
            type: Boolean,
            default: false,
        },
        index: {
            type: Boolean,
            default: false,
        },
        layout: {
            type: String,
            default: 'views,download',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {}
    },
    computed: {
        aHref() {
            return `/document/${this.data.guid}`
        },
        // coverSrc() {
        //     return `${this.$store.state.api.fileUrl}/download/look.do?rowguid=${this.data.coverrowguid}`;
        // },
        similarHref() {
            return `/search/document?title=${this.data.docname}`
        },
        docname() {
            var name = this.data.docname;

            if (this.index) {
                var indexTitleLength = 16;

                if (name.length > indexTitleLength) {
                    return name.slice(0, indexTitleLength) + '...'
                }
            }

            var listTitleLength = 22;
            if (name.length > listTitleLength) {
                return name.slice(0, listTitleLength) + '...'
            }

            return name;
        },
    },

    methods:{},

    mounted() {},
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';
    
    .document-list-item{
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d2d2d2;
        width: 214px;

        &.shadow{
            // box-shadow: 0px 1px 6px 0px rgba(61, 126, 255, 0.15);
            padding-bottom: 10px;

            .title{
                padding: 0 10px;
            }

            .tool-bar{
                padding: 0 10px;
                display: flex;
                margin-top: -20px;
                justify-content: flex-end;
            }

            .img{
                border: none;
            }
        }

        &.disabled{
            filter: grayscale(90%);
        }

        // &.radius{
        //     border-radius: 6px;
        // }

        .img-con{
            margin: 0 auto;
            width: 214px !important;
            height: 260px !important;   //214 234 
            border: solid 1px red;

        }

        .img{
            display: block;
	        height: 186px;
            background: $primaryColor1;
            // border: solid 1px #d2d2d2;
            border: solid 1px red;
            box-sizing: border-box;

            &.index{
                box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
                border: solid 1px rgba(0, 0, 0, 0.07);
            }

            .cover-img{
                width: 100%;
                height: 100%;
                transition: all .3s;
            }

            &:hover{
                .cover-img{
                    transform: scale(1.1);
                }

                .similar{
                    display: block;
                }
            }

            .similar{
                width: 100%;
                padding: 8px 10px;
                background-color: $primaryColor;
                color: white;
                position: absolute;
                left: 0;
                bottom: 0;
                display: none;
                line-height: 1em;
                text-align: center;
                opacity: 0.8;

                &:hover{
                    background-color: $primaryColor7;
                }
            }
        }

        .title{
            display: block;
            font-size: 15px;
            color: #333333;
            line-height: 1.5em;
            transition: all .3s;
            margin-top: 5px;
            height: 50px;
            margin-bottom: -8px;
            font-weight: 600;

            &:hover{
                color: $primaryColor;
            }
        }
    }
</style>
